import React, { useState } from 'react'
import FinancialStyle from './financial.module.css'
import {Table,Input, Button ,Modal } from 'antd'
import { ReactComponent as ResIcon } from "../../assets/icon/刷新.svg";
const { Search } = Input;
function FinancialPages() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onSearch = (value, _e, info) => console.log(info?.source, value);
  const colums=[
    {
      key:"1",
      title:"结算单编号",
      dataIndex:"结算单编号",
      align:"center",
    },
    {
      key:"2",
      title:"结算状态",
      dataIndex:"结算状态",
      align:"center",
    },{
      key:"3",
      title:"推结算时间",
      dataIndex:"推结算时间",
      align:"center",
    },{
      key:"4",
      title:"确认结算时间",
      dataIndex:"确认结算时间",
      align:"center",
    },{
      key:"5",
      title:"项目编号",
      dataIndex:"项目编号",
      align:"center",
    },{
      key:"6",
      title:"项目名称",
      dataIndex:"项目名称",
      align:"center",
    },{
      key:"7",
      title:"产品",
      dataIndex:"产品",
      align:"center",
    },{
      key:"9",
      title:"结算样本个数",
      dataIndex:"结算样本个数",
      align:"center",
    },{
      key:"10",
      title:"结算单价",
      dataIndex:"结算单价",
      align:"center",
    },{
      key:"11",
      title:"结算金额",
      dataIndex:"结算金额",
      align:"center",
    },{
      key:"12",
      title:"款项来源合同编号",
      dataIndex:"款项来源合同编号",
      align:"center",
    },{
      key:"13",
      title:"款项来源合同名称",
      dataIndex:"款项来源合同名称",
      align:"center",
    },{
      key:"14",
      title:"客户姓名",
      dataIndex:"客户姓名",
      align:"center",
    },{
      key:"15",
      title:"客户单位",
      dataIndex:"客户单位",
      align:"center",
    },
  ]
  return (
    <div className={FinancialStyle.Financial_app}>
         <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
      <div className={FinancialStyle.Financial_Form}>
        <Search 
         placeholder="input search text"
         onSearch={onSearch}
         style={{
          width: 200,
          marginRight: "10px",
        }}
        />
                <Button style={{ marginRight: "10px" }}
        onClick={showModal}
        >新增</Button>
        <Button style={{ display: "flex", alignItems: "center" }}>
          <ResIcon width={15} />
          <span style={{ margin: "0 5px" }}>重置</span>
        </Button>
      </div>
      <Table columns={colums} bordered={true} scroll={{
        x: 1500,        
      }}/>
    </div>
  )
}

export default FinancialPages
